<template>
    <ul>
        <li v-for="val in citiesList"
            :key="val" @click="city"
            @touchstart.prevent="handleTouchstart"
            @touchmove="handleTouchmove"
            @touchend="handleTouchend"
            :ref="val"
         >{{val}}</li>
    </ul>
</template>

<script>
export default {
    props: ['cities'],
    data() {
        return {
            touchStatus:false   //标识符
        }
    },
    computed:{
        citiesList() {
            let arr = []
            for(let k in this.cities) {
                arr.push(k)
            }
            return arr
        }
    },
    methods: {
        city(e) {
            this.$emit('change',e.target.innerHTML)
        },
        handleTouchstart() {
            this.touchStatus = true
        },
        handleTouchmove(e) {
            if (this.touchStatus) {
               const startY = this.$refs['A'][0].offsetTop  //A 距离顶部的高度
               const touchY = e.touches[0].clientY - 83
               const index = Math.floor((touchY - startY) / 25) //当前手指滑动的位置
               if (index >= 0 && this.citiesList.length) {
                   this.$emit('change',this.citiesList[index])
               }
            }
        },
        handleTouchend() {
            this.touchStatus = false
        }
    }
}
</script>

<style lang="less" scoped>
    ul {
        position: fixed;
        right: 0;
        top: 83px;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #00B4CE;
        li {
            width: 25px;
            height: 25px;
            line-height: 25px;
            text-align: center;
        }
    }
</style>
